<template>
  <el-dialog
    v-loading="loading"
    append-to-body
    :title="title"
    :visible.sync="dialogVisible"
    width="540px"
    @close="result = false"
  >
    <el-form class="demo-form-inline" :inline="true" :model="computedData">
      <el-form-item label="日期范围">
        <el-date-picker
          v-model="computedData.daterange"
          end-placeholder="结束日期"
          range-separator="~"
          start-placeholder="开始日期"
          type="daterange"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>
    <el-result
      v-if="result"
      icon="success"
      sub-title="数据已重新处理完毕"
      title="操作成功"
    >
      <template slot="extra">
        <el-button size="medium" type="primary" @click="result = false">
          返回
        </el-button>
      </template>
    </el-result>
  </el-dialog>
</template>

<script>
  import {
    weatherDaily,
    sensorDaily,
    cropDaily,
    autocareDaily,
  } from '@/api/remote'
  import { mapGetters } from 'vuex'
  import { dclassCodeMap, fieldId } from '@/utils/constant'
  export default {
    data() {
      return {
        dialogVisible: false,
        title: '重新计算',
        computedData: { daterange: [] },
        loading: false,
        result: false,
        row: {},
      }
    },
    computed: {
      ...mapGetters(['devices', 'project']),
      qxz() {
        const res = this.devices.filter(
          (item) => +item.product_type === dclassCodeMap.qxz
        )
        console.log(res)
        return res
      },
    },
    methods: {
      show(row) {
        console.log(this.project)
        this.row = row
        this.title = '重新计算' + row.name
        this.dialogVisible = true
      },
      onSubmit() {
        if (this.computedData.daterange.length < 2) {
          this.$message.error('请选择正确的日期范围')
          return false
        }
        this.loading = true
        switch (this.row.id) {
          case 1:
            this.weatherDaily()
            break
          case 2:
            this.sensorDaily()
            break
          case 3:
            this.cropDaily()
            break
          case 4:
            this.autocareDaily()
            break
        }
      },
      weatherDaily() {
        const params = {
          from: this.computedData.daterange[0],
          to: this.computedData.daterange[1],
          serialno: this.qxz[0].serialno,
        }
        weatherDaily(params)
          .then((res) => {
            this.$message.success(res.msg)
            this.loading = false
            this.result = true
          })
          .catch((err) => {
            this.loading = false
            this.$message.error(err.message)
          })
      },
      sensorDaily() {
        const params = {
          field_id: fieldId,
          from: this.computedData.daterange[0],
          to: this.computedData.daterange[1],
        }
        sensorDaily(params)
          .then((res) => {
            this.$message.success(res.msg)
            this.loading = false
            this.result = true
          })
          .catch((err) => {
            this.loading = false
            this.$message.error(err.message)
          })
      },
      cropDaily() {
        const params = {
          field_id: fieldId,
          from: this.computedData.daterange[0],
          to: this.computedData.daterange[1],
        }
        cropDaily(params)
          .then((res) => {
            this.$message.success(res.msg)
            this.loading = false
            this.result = true
          })
          .catch((err) => {
            this.loading = false
            this.$message.error(err.message)
          })
      },
      autocareDaily() {
        const params = {
          from: this.computedData.daterange[0],
          to: this.computedData.daterange[1],
          field_id: fieldId,
        }
        autocareDaily(params)
          .then((res) => {
            this.$message.success(res.msg)
            this.loading = false
            this.result = true
          })
          .catch((err) => {
            this.loading = false
            this.$message.error(err.message)
          })
      },
    },
  }
</script>

<style lang="scss" scoped></style>
